import React from 'react';
import ReactDOM from 'react-dom';

import { createHashHistory } from 'History';
import { Router, Route, useRouterHistory } from 'react-router'
import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';

import { Provider } from 'mobx-react';

import CubeEngine from './index';
const CubeEngineRoute = CubeEngine.Route;
const formModeStores = CubeEngine.store;

import window from './util';
import './style';

const routing = new RouterStore();
let stores = {
    // Key can be whatever you want
    routing: routing,
    ...formModeStores
};
const browserHistory = useRouterHistory(createHashHistory)({
    queryKey: '_key',
    basename: '/'
});

const history = syncHistoryWithStore(browserHistory, stores.routing);


window.cubeStore = formModeStores;
window.weaHistory = history;

class Root extends React.Component {

    render() {
        return (
            <Provider {...stores}>
                <Router history={history}>
                    <Route path="/">
                        {CubeEngineRoute}
                    </Route>
                </Router>
            </Provider>
        )
    }
}

ReactDOM.render(<Root />, document.getElementById('container'));
